* {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
    float: left;
}

.flex_cent {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex_bet {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cont {
    width: 1240px;
    background-color: #eeedf2;
}

/* 1-1
Recent上边部分（圆球背景、横向隐藏、icon图标宫格） */
.homeTopBox {
    position: relative;
    height: 1290px;
    overflow: hidden;
}

/* 最大背景圆球 */
.roundMaxBox {
    width: 4000px;
    height: 4000px;
    border-radius: 50%;
    background-color: #b1c4e5;
    position: absolute;
    z-index: 1;
    top: -3000px;
    left: -1380px;
}

/* 中间背景圆球 */
.roundContBox {
    width: 4000px;
    height: 4000px;
    border-radius: 50%;
    background-color: #85a5de;
    position: absolute;
    z-index: 2;
    top: -200px;
}

/* 倒数第二小背景圆球 */
.roundMinBox {
    width: 4000px;
    height: 4000px;
    border-radius: 50%;
    background-color: #658fd7;
    position: absolute;
    z-index: 3;
    top: -200px;
}

/* 最小背景圆球 */
.roundBox {
    width: 4000px;
    height: 4000px;
    border-radius: 50%;
    background-color: #5987d5;
    position: absolute;
    z-index: 4;
    top: -200px;
}

/* welcome */
.WelcomeBox {
    width: 1150px;
    height: 152px;
    margin: 45px auto;
    position: relative;
    z-index: 5;
    color: white;
}

.WelcomeBox .txtLeftBox p {
    font-size: 28px;
}

.WelcomeBox .txtLeftBox h2 {
    font-size: 60px;
    width: 100%;
}

.WelcomeBox .iconRigheBox li {
    width: 135px;
    height: 135px;
    border-radius: 56px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 36px;
    box-shadow: 0px 10px 50px rgb(65, 65, 65);
}

.WelcomeBox .iconRigheBox li img {
    width: 65px;
    height: 65px;
}

.WelcomeBox ul li:nth-child(2) {
    position: relative;
}

.WelcomeBox ul li:nth-child(2) .supBox {
    width: 46px;
    height: 50px;
    border-radius: 12px;
    background-color: #dc5f65;
    position: absolute;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -13px;
    right: 10px;
}

.WelcomeBox ul li:nth-child(3) img {
    width: 136px;
    height: 135px;
    border-radius: 56px;
}

/* 横向滑动银行卡 */
.cardBox {
    height: 660px;
    position: relative;
    z-index: 5;
    margin-left: 45px;
}

.cardBox ul {
    height: 660px;
    overflow-x: auto;
    overflow-y: hidden;
}

.cardBox li {
    width: 996px;
    height: 600px;
    flex-shrink: 0;
    border-radius: 67px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 67px;
    color: white;
    font-size: 26px;
}

.cardBox ul li:nth-child(1) {
    background-image: url(../images/image3.jpg);
}

.cardBox ul li:nth-child(2) {
    background-image: url(../images/image4.jpg);
}

.cardBox ul li:nth-child(3) {
    background-image: url(../images/image5.jpg);
}

.cardBox .zhezhao {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.384);
    border-radius: 67px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    font-weight: bold;
}

.zhezhao .topBox,
.zhezhao .contBox,
.zhezhao .bottBox {
    width: 946px;
    padding-left: 50px;
}

.zhezhao .topBox,
.zhezhao .bottBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topBox .gengduoIcon {
    width: 102px;
    height: 102px;
    border-radius: 35px;
    background-color: white;
    margin-right: 48px;
}

.zhezhao .contBox {
    width: 396px;
    height: 114px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color: white;
    color: black;
}

.zhezhao .bottBox span:nth-child(2) {
    margin-right: 53px;
}

/* 图标宫格 */
.homeTopBox .gridBox {
    width: 1154px;
    height: 374px;
    margin: 0px auto;
    position: relative;
    z-index: 4;
}

.homeTopBox .gridBox ul {
    width: 1154px;
    height: 374px;
}

.homeTopBox .gridBox li {
    width: 197px;
    height: 256px;
    font-size: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.homeTopBox .gridBox li .iconBox {
    width: 197px;
    height: 197px;
    border-radius: 53px;
    background-color: white;
    margin-bottom: 32px;
    box-shadow: 0px 5px 20px rgb(207, 207, 207);
}

.homeTopBox .gridBox li .iconBox img {
    width: 100px;
    height: 100px;
}

/* Recent Activity */
.RecentBox {
    width: 1154px;
    margin: 30px auto;
}

/* 标题栏 */
.RecentBox .titleBox {
    height: 77px;
}

.RecentBox .titleBox h2 {
    font-size: 35px;
}

.RecentBox .titleBox span {
    font-size: 24px;
    color: #757577;
}

/* 内容 */
.RecentBox .contBox {
    width: 1153px;
    height: 704px;
    border-radius: 60px;
    background-color: white;
    margin-top: 25px;
    box-shadow: 0px 5px 20px rgb(207, 207, 207);
    display: flex;
    align-items: center;
    justify-content: center;
}

.RecentBox .contBox ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.RecentBox .contBox ul li:nth-child(2) {
    border-top: 3px solid #ecefe6;
    border-bottom: 3px solid #ecefe6;
}

.RecentBox .contBox li {
    height: 214px;
    width: 1062px;
    display: flex;
    align-items: center;
}

.RecentBox .contBox .iconBox img {
    width: 60px;
    height: 60px;
}

.RecentBox .contBox .titleBox {
    height: 135px;
    margin-left: 38px;
    line-height: 63px;
}

.RecentBox .contBox .titleBox h3 {
    font-size: 34px;
}

.RecentBox .contBox .titleBox span {
    font-size: 22px;
    color: #b8b8b8;
}

.RecentBox .contBox .priceBox {
    margin-left: auto;
    line-height: 63px;
    text-align: center;
}

.RecentBox .contBox .priceBox p {
    font-size: 23px;
    color: #757575;
}

.RecentBox .contBox .iconBox {
    width: 135px;
    height: 135px;
    border-radius: 41px;
    box-shadow: 0px 10px 50px rgb(189, 188, 188);
}

.RecentBox .contBox .priceBox h3 {
    font-size: 46px;
}

.RecentBox ul li:nth-child(1) .iconBox {
    background-color: #e56e4e;
}

.RecentBox ul li:nth-child(1) .priceBox h3 {
    color: #ca5357;
}


.RecentBox ul li:nth-child(2) .iconBox {
    background-color: #a4cb6e;
}

.RecentBox ul li:nth-child(2) .priceBox h3 {
    color: #5689da;
}


.RecentBox ul li:nth-child(3) .iconBox {
    background-color: #f4ca66;
}

.RecentBox ul li:nth-child(3) .priceBox h3 {
    color: #98be67;
}

/* Account Activity */
.AccountBox {
    width: 1154px;
    height: 366px;
    margin: 30px auto;
}

.AccountBox .titleBox {
    height: 117px;
}

.AccountBox .titleBox h2 {
    font-size: 35px;
}

.AccountBox .titleBox span {
    font-size: 24px;
    color: #757577;
}

.AccountBox .checkBox {
    height: 250px;
    background-color: #a0c96d;
    border-radius: 64px;
    color: white;
    box-shadow: 0px 5px 30px rgb(182, 182, 182);
}

.AccountBox .checkBox li {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
}

.AccountBox .checkBox .icon {
    margin: 0px 45px;
}

.AccountBox .checkBox .icon img {
    width: 120px;
    height: 120px;
}

.AccountBox .checkBox .text {
    font-size: 35px;
    font-weight: bolder;
}

.AccountBox .checkBox .back {
    margin-left: auto;
    margin-right: 45px;
}

.AccountBox .checkBox .back img {
    width: 30px;
    height: 29px;
}

/* Send Money  */
.SendBox {
    margin: 30px 0px;
}

.SendBox .titleBox {
    width: 1154px;
    height: 122px;
    margin: 0px auto;
}

.SendBox .titleBox h2 {
    font-size: 35px;
}

.SendBox .titleBox span {
    font-size: 24px;
    color: #757577;
}

.SendBox .iconRollBox {
    width: 100%;
}

.SendBox .iconRollBox ul {
    height: 300px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
}

.SendBox .iconRollBox li {
    width: 213px;
    height: 246px;
    flex-shrink: 0;
    margin: 0px 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-between;
    font-size: 24px;
    font-weight: bold;
}

.SendBox .iconRollBox li img {
    width: 213px;
    height: 182px;
    border-radius: 57px;
    box-shadow: 0px 10px 30px rgb(133, 132, 132);
}

/* 3 Settings */
.SettingsBox {
    width: 1155px;
    height: 1120px;
    border-radius: 46px;
    background-color: white;
    margin: 43px auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* 标签切换 */
.SettingsBox input {
    display: none;
}

.SettingsBox .TabsBox ul {
    width: 1062px;
    height: 130px;
    border-radius: 65px;
    background-color: #ededed;
    margin: 44px 0px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    z-index: 2;
}

.SettingsBox .TabsBox li {
    width: 342px;
    height: 108px;
    border-radius: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: black;
    position: relative;
    z-index: 2;
    transition: 1s;
}

.SettingsBox .TabsBox .bgBox {
    position: absolute;
    width: 342px;
    height: 108px;
    border-radius: 54px;
    background-color: #5987d5;
    z-index: 1;
    transition: 1s;
    left: 15px;
    box-shadow: 0px 5px 10px rgb(172, 172, 172);
}

input[id="chk1"]:checked~ul label:nth-child(2) li {
    color: white;
}

input[id="chk1"]:checked~ul .bgBox {
    transform: translateX(0px);
}

input[id="chk2"]:checked~ul label:nth-child(3) li {
    color: white;
}

input[id="chk2"]:checked~ul .bgBox {
    transform: translateX(342px);
}

input[id="chk3"]:checked~ul label:nth-child(4) li {
    color: white;
}

input[id="chk3"]:checked~ul .bgBox {
    transform: translateX(684px);
}

/* 设置功能列表 */
.domainBox {
    width: 1140px;
    height: 900px;
}

.domainBox input {
    display: none;
}

.domainBox ul li {
    width: 100%;
    border-bottom: 3px solid #ededed;
    display: flex;
    align-items: center;
}

.domainBox .iconBox {
    width: 92px;
    height: 92px;
    border-radius: 27px;
    box-shadow: 0px 10px 10px rgb(182, 182, 182);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 47px;
}

.domainBox .iconBox img {
    width: 50px;
    height: 50px;
}

.domainBox .txtBox h3 {
    font-size: 31px;
}

.domainBox .txtBox p {
    font-size: 24px;
    color: #a8a9ab;
    margin-top: 15px;
}


/* 公共按钮样式 */
.domainBox .buttonBox {
    width: 122px;
    height: 68px;
    border-radius: 68px;
    background-color: #ededed;
    position: relative;
    transition: 1s;
}

.domainBox label {
    margin-left: auto;
    margin-right: 68px;
}

.domainBox .buttonBox::after {
    content: "";
    width: 0px;
    height: 0px;
    border-radius: 50%;
    position: absolute;
    border: 29px solid white;
    box-shadow: 0px 0px 0px 3px #e0e0e0;
    top: 7px;
    left: 5px;
}

input[name="chkButtonBox"]:checked~label .buttonBox {
    background-color: #97be61;
}

input[name="chkButtonBox"]:checked~label .buttonBox::after {
    left: 60px;
}

/* 第一个按钮 */
.domainBox ul li:nth-child(1) {
    height: 201px;
}

.domainBox ul li:nth-child(1) .iconBox {
    background-color: #a0c76a;
}

/* 第二个按钮 */
.domainBox ul li:nth-child(2) {
    height: 201px;
}

.domainBox ul li:nth-child(2) .iconBox {
    background-color: #a58be6;
}

input[name="chkButtonBox_wifi"]:checked~label .buttonBox {
    background-color: #97be61;
}

input[name="chkButtonBox_wifi"]:checked~label .buttonBox::after {
    left: 60px;
}

/* 无按钮组样式 */
.domainBox ul li:nth-child(n+3) {
    height: 156px;
}

.domainBox .forwardBox {
    width: 15px;
    height: 15px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    margin-left: auto;
    margin-right: 70px;
    transform: rotate(-45deg);
}

.domainBox ul li:nth-child(3) .iconBox {
    background-color: #6493d9;
}

.domainBox ul li:nth-child(4) .iconBox {
    background-color: #d75462;
}

.domainBox ul li:nth-child(5) .iconBox {
    background-color: #f3c95d;
}

.domainBox ul li:nth-child(5) {
    border: none;
}

/* 4 Recent Activity */
.ActivityBox {
    width: 1154px;
    margin: 30px auto;
}

.ActivityBox .checkBox {
    height: 250px;
    background-color: #98bf62;
    border-radius: 64px;
    color: white;
    box-shadow: 0px 5px 30px rgb(182, 182, 182);
}

.ActivityBox .checkBox li {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
}

.ActivityBox .checkBox .icon {
    margin: 0px 45px;
}

.ActivityBox .checkBox .icon img {
    width: 120px;
    height: 120px;
}

.ActivityBox .checkBox .text {
    font-size: 35px;
    font-weight: bolder;
}

.ActivityBox .checkBox .back {
    margin-left: auto;
    margin-right: 45px;
}

.ActivityBox .checkBox .back img {
    width: 50px;
    height: 50px;
}

.ActTabsBox {
    width: 1155px;
    border-radius: 46px;
    background-color: white;
    margin: 43px auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* 标签切换 */
.ActTabsBox input {
    display: none;
}

.ActTabsBox .TabsBox ul {
    width: 1062px;
    height: 130px;
    border-radius: 65px;
    background-color: #ededed;
    margin: 44px 0px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    z-index: 2;
}

.ActTabsBox .TabsBox li {
    width: 342px;
    height: 108px;
    border-radius: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: black;
    position: relative;
    z-index: 2;
    transition: 1s;
}

.ActTabsBox .TabsBox .bgBox {
    position: absolute;
    width: 342px;
    height: 108px;
    border-radius: 54px;
    background-color: #5987d5;
    z-index: 1;
    transition: 1s;
    left: 15px;
    box-shadow: 0px 5px 10px rgb(172, 172, 172);
}

input[id="chkActivityBox1"]:checked~ul label:nth-child(2) li {
    color: white;
}

input[id="chkActivityBox1"]:checked~ul .bgBox {
    transform: translateX(0px);
}

input[id="chkActivityBox2"]:checked~ul label:nth-child(3) li {
    color: white;
}

input[id="chkActivityBox2"]:checked~ul .bgBox {
    transform: translateX(342px);
}

input[id="chkActivityBox3"]:checked~ul label:nth-child(4) li {
    color: white;
}

input[id="chkActivityBox3"]:checked~ul .bgBox {
    transform: translateX(684px);
}

/* 设置功能列表 */
.ActdomainBox {
    width: 1140px;

}

.ActdomainBox input {
    display: none;
}

.ActdomainBox ul li {
    width: 100%;
    height: 201px;
    border-bottom: 3px solid #ededed;
    display: flex;
    align-items: center;
}

.ActdomainBox .iconBox {
    width: 92px;
    height: 92px;
    border-radius: 27px;
    box-shadow: 0px 10px 10px rgb(182, 182, 182);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 47px;
}

.ActdomainBox .iconBox img {
    width: 50px;
    height: 50px;
}

.ActdomainBox .txtBox h3 {
    font-size: 31px;
}

.ActdomainBox .txtBox p {
    font-size: 24px;
    color: #a8a9ab;
    margin-top: 15px;
}

.ActdomainBox .PriceBox {
    margin-left: auto;
    margin-right: 70px;
    text-align: center;
}

.ActdomainBox .PriceBox p:nth-child(1) {
    font-size: 45px;
    font-weight: bold;
}

.ActdomainBox .PriceBox p:nth-child(2) {
    font-size: 22px;
    color: #737373;
}

.ActdomainBox ul li:nth-child(1) .PriceBox p:nth-child(1) {
    color: #93bf5e;
}

.ActdomainBox ul li:nth-child(2) .PriceBox p:nth-child(1) {
    color: #5b7fdd;
}

.ActdomainBox ul li:nth-child(3) .PriceBox p:nth-child(1) {
    color: #c64f63;
}

.ActdomainBox button {
    margin-left: auto;
    margin-right: 70px;
    border-radius: 46px;
    border: none;
    color: white;
    font-size: 22px;
    font-weight: bold;
    box-shadow: 2px 5px 30px rgb(148, 148, 148);
}

.ActdomainBox ul li:nth-child(4) button {
    width: 200px;
    height: 98px;
    background-color: #9fc669;
}

.ActdomainBox ul li:nth-child(5) button {
    width: 180px;
    height: 98px;
    background-color: #5f8dda;
}

.ActdomainBox .forwardBox {
    width: 15px;
    height: 15px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    margin-left: auto;
    margin-right: 70px;
    transform: rotate(-45deg);
}

.ActdomainBox ul li:nth-child(1) .iconBox {
    background-image: url(../images/image5.jpg);
    background-repeat: no-repeat;

}


.ActdomainBox ul li:nth-child(2) .iconBox {
    background-color: #af9c7e;
}


.ActdomainBox ul li:nth-child(3) .iconBox {
    background-color: #e36b52;
}

.ActdomainBox ul li:nth-child(4) .iconBox {
    background-color: #a7cf6c;
}

.ActdomainBox ul li:nth-child(5) .iconBox {
    background-color: #6898e2;
}

.ActdomainBox ul li:nth-child(5) {
    border: none;
}

/* 5 IconGridBox */
.IconGridBox {
    padding: 20px 0px;
}

.IconGridBox .gridBox ul {
    display: flex;
    justify-content: space-around;
    align-content: center;
    flex-wrap: wrap;
}

.IconGridBox .gridBox li {
    width: 544px;
    height: 544px;
    margin: 32px 0px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 64px;
    background-color: white;
    text-align: center;
    box-shadow: 0px 5px 20px rgb(207, 207, 207);
}

.IconGridBox .gridBox li h3,
.IconGridBox .gridBox li p {
    width: 100%;
}

.IconGridBox .gridBox li h3 {
    margin-top: 50px;
    font-size: 47px;
}

.IconGridBox .gridBox li p {
    margin-top: 36px;
    font-size: 24px;
    color: #9d9d9d;
}

.IconGridBox .gridBox li .iconBox {
    width: 155px;
    height: 155px;
    border-radius: 60px;
    margin-top: 124px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 10px 30px rgb(194, 194, 194);
}

.IconGridBox .gridBox li:nth-child(1) .iconBox {
    background-color: #a1c86b;
}

.IconGridBox .gridBox li:nth-child(2) .iconBox {
    background-color: #da684d;
}

.IconGridBox .gridBox li:nth-child(3) .iconBox {
    background-color: #f5ca64;
}

.IconGridBox .gridBox li:nth-child(4) .iconBox {
    background-color: #6690e2;
}

/* Account Reports */
.accountBox {
    width: 1154px;
    height: 275px;
    background-color: white;
    margin: 30px auto;
    border-radius: 64px;
    box-shadow: 0px 5px 20px rgb(207, 207, 207);
    display: flex;
    align-items: center;
}

.accountBox .iconBox {
    width: 137px;
    height: 137px;
    background-color: #b19d82;
    border-radius: 40px;
    margin-left: 73px;
    margin-right: 60px;
}

.accountBox .txtBox {
    line-height: 54px;
}

.accountBox .txtBox h3 {
    font-size: 38px;
}

.accountBox .txtBox p {
    font-size: 24px;
    color: #9d9d9d;
}

/* footerBox */
.footerBox {
    width: 1154px;
    height: 195px;
    margin: 0px auto;
    margin-top: 50px;

}

.footerBox .box {
    width: 1154px;
    height: 195px;
    border-radius: 70px;
    background-color: white;
    position: fixed;
    z-index: 99;
    bottom: 0px;
    left: 40px;
    right: 0px;
    display: flex;
    align-items: center;
    box-shadow: 0px 5px 20px rgb(207, 207, 207);
}

.footerBox .box ul {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.footerBox .box li {
    width: 150px;
    text-align: center;
}

.footerBox span {
    margin-top: 40px;
    font-size: 56px;
}

.footerBox p {
    margin-top: 35px;
    font-size: 23px;
    font-weight: bold;
}

.footerBox .box li:nth-child(1) span {
    color: #5d86d8;
}

.footerBox .box li:nth-child(1) p {
    color: #89a7dd;
}

.footerBox ul li:nth-child(3) .IconHomeBox {
    width: 150px;
    height: 150px;
    color: white;
    background-color: #5e8cd9;
    border-radius: 56px;
    transform: translateY(-70px);
}

.footerBox ul li:nth-child(3) .IconHomeBox span {
    margin: 0px;
}
.footerBox ul li:nth-child(3) p{
    margin-top: -50px;
}